<template>
	<view class="main">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in swiper">
				<view class="swiper-item">
					<image :src="item" mode="scaleToFills" style="width: 100%; height: 240px;"></image>
				</view>
			</swiper-item>
		</swiper>

		<uni-section title="留言列表">
			<swiper :indicator-dots="true" :interval="3000" :duration="1000" style="height: 100px;">
				<swiper-item v-for="(row, rowIndex) in items" :key="rowIndex">
					<uni-grid :column="5">
						<uni-grid-item v-for="(item,itemIndex) in row">
							<view
								style="display: flex; flex-direction: column; align-items: center; padding-top: 9px; justify-content: space-evenly;">
								<image :src="item.icon" style="width: 70rpx; height: 70rpx; " mode=""></image>
								<view>{{item.title}}</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</swiper-item>
			</swiper>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper: [
					"/static/city.png",
					"/static/bg.jpg",
					"/static/shuijiao.jpg"
				],
				items: [
					[{
							title: "新闻",
							icon: "/static/新闻.png"
						},
						{
							title: "公告",
							icon: "/static/公告.png"
						},
						{
							title: "同学",
							icon: "/static/同学1.png"
						},
						{
							title: "电话",
							icon: "/static/电话.png"
						},
						{
							title: "留言",
							icon: "/static/留言.png"
						}
					],
					[{
							title: "",
							icon: ""
						},
						{
							title: "",
							icon: ""
						},
						{
							title: "",
							icon: ""
						},
						{
							title: "",
							icon: ""
						},
						{
							title: "",
							icon: ""
						}
					]
				]
			};
		}
	}
</script>

<style>

</style>